import React, { useState } from 'react';
import { StyleSheet, Text, View, ToastAndroid, Platform } from 'react-native';
import { type LoginNavigationProps } from '../../types';
import {
    Button, Icon, Avatar, Input, CheckBox,
} from '@rneui/themed';

import { getCode, userPhoneLogin } from '../../api/user';



function Login({ navigation }: { navigation: LoginNavigationProps['navigation'] }): React.JSX.Element {
    const
        [verifyCodeBtn, setVerifyCodeBtn] = useState('获取验证码'),
        [isDisabled, setIsDisabled] = useState(false),
        [checked, setChecked] = useState(true),
        [phone, setPhone] = useState(''),
        [verifyCode, setVerifyCode] = useState('')
        ;
    const toggleCheckbox = () => setChecked(!checked);

    // 获取验证码
    const onGetCode = async () => {
        if (phone.length !== 11) {
            if (Platform.OS === 'android') ToastAndroid.show("请输入正确的手机号!", 3);
            return console.log('onGetCode', phone);
        }
        if (Platform.OS === 'android') ToastAndroid.show("获取验证码成功！", 3);
        let count = 5
        setIsDisabled(true)
        setVerifyCodeBtn(count + 's后重新获取')
        const timer = setInterval(() => {
            setVerifyCodeBtn(count + 's后重新获取')
            if (count === 0) {
                setVerifyCodeBtn('获取验证码')
                clearInterval(timer)
                setIsDisabled(false)
            }
            count--
        }, 1000)
        const { data } = await getCode({ phone })
        console.log('onGetCode', data);
        if (data.code !== 200) {
            setVerifyCodeBtn('获取验证码')
            clearInterval(timer)
            setIsDisabled(false)
            if (Platform.OS === 'android') ToastAndroid.show("验证码发送失败！请重试", 3);
            return
        }
        if (Platform.OS === 'android') ToastAndroid.show("验证码已发送至" + phone, 3);
    }
    // 登录
    const onLogin = async () => {
        const { data } = await userPhoneLogin({ phone, verification_code: verifyCode })
        if (data.code !== 200) {
            if (Platform.OS === 'android') ToastAndroid.show("验证码错误！请重试", 3);
            return
        }
        console.log('登录', data);
        navigation.navigate('Home')
    }

    return (
        <View style={{ height: "100%" }}>
            <View style={[styles.header, { marginVertical: 20 }]}>
                <View style={styles.icon}>
                    <Icon
                        onPress={() => navigation.goBack()}
                        name='close-outline'
                        type='ionicon'
                        color='#000'
                        size={50}
                    />
                </View>
            </View>
            <View style={{ justifyContent: 'center', flexDirection: 'row', marginVertical: 50 }}>
                <Avatar
                    size={68}
                    source={{ uri: "https://help.nongkeyu.com/favicon.ico" }}
                />
            </View>
            {/* 账号输入 */}
            <View style={styles.item}>
                <Input
                    label={'+86'}
                    labelStyle={{ lineHeight: 50, marginRight: 10 }}
                    containerStyle={{ flexDirection: 'row' }}
                    inputContainerStyle={{ flex: 1 }}
                    keyboardType="numeric"
                    maxLength={11}
                    placeholder='输入手机号'
                    onChangeText={(text) => { setPhone(text) }}
                />
            </View>
            {/* 验证码 */}
            <View style={{ width: '100%', flexDirection: 'row', marginHorizontal: 15 }}>
                <Input
                    containerStyle={{ flex: 1, flexDirection: 'row', justifyContent: 'center', alignItems: 'center', paddingLeft: 10, paddingHorizontal: 0 }}
                    inputContainerStyle={{ flex: 1 }}
                    keyboardType="numeric"
                    placeholder='输入验证码'
                    onChangeText={(text) => { setVerifyCode(text) }}
                />
                <View style={{
                    width: "43%",
                    paddingTop: 10,
                    paddingRight: 30
                }}>
                    <Button size="sm" type="clear" title={verifyCodeBtn} disabled={isDisabled} onPress={onGetCode}></Button>
                </View>
            </View>
            {/* 设置密码 */}
            {/* <View style={styles.item}>
                <Input
                    containerStyle={{ flexDirection: 'row' }}
                    inputContainerStyle={{ flex: 1 }}
                    maxLength={16}
                    placeholder='设置密码（6-16位）'
                />
            </View>
            <View style={styles.item}>
                <Input
                    containerStyle={{ flexDirection: 'row' }}
                    inputContainerStyle={{ flex: 1 }}
                    maxLength={16}
                    placeholder='确认密码（6-16位）'
                />
            </View> */}
            {/* 用户协议 */}
            <View style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center', marginTop: 20 }}>
                <CheckBox
                    containerStyle={{ backgroundColor: "transparent" }}
                    checked={checked}
                    onPress={toggleCheckbox}
                    title={
                        <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                            <Text>我已阅读并同意</Text>
                            <Button size="sm" titleStyle={{ fontSize: 13 }} type="clear" title={'《用户协议》与《隐私政策》'}></Button>
                        </View>
                    } />
            </View>
            <View style={styles.item}>
                <Button size="lg" onPress={onLogin}>登录</Button>
            </View>
            {/* 其他登录方式 */}
            {/* <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', margin: 20 }}>
                <Button size="sm" type="clear" title='验证码登录'></Button>
                <Button size="sm" type="clear" title='账号密码登录'></Button>
            </View> */}
        </View>
    );
}

const styles = StyleSheet.create({
    header: {
        width: "100%",
        height: 50,
        alignItems: 'flex-start',
    },
    icon: {
        height: 50,
        flex: 1,
        alignItems: 'flex-start',
    },
    containerStyle: {
        backgroundColor: "red"
    },
    item: {
        marginHorizontal: 15
    }
});

export default Login;
